<template>
	<div class="tabzindex1" :style="`background-color: ${tabbgcolor}`" :class="{tabshow:tabshow}">
		<tab-head class="cjy-slider" :tabindex="tabindex" :titleInfor="titleInfor" @tabOnChange="tabOnChange" :styleConfig='styleConfig'>
			<div slot="textBox" slot-scope="props" :class="{active :props.isActive}" class="cjy-test-header">
				<div class="cjy-text-inner" :style="props.isActive ? props.activeStyle : props.normalStyle">
					{{props.title}}
				</div>
			</div>
		</tab-head>
	</div>
</template>

<script>
	import TabHead from '@/components/TabHead/normal.vue';
	import {TabHeaderColor} from "../../config/stystem-params";
	export default {
		props: {
			titleInfor: {
				type: Array,
				//������������� �������Ʊش�
				default: () => []
			},
			tabindex: {
				type: String,
				default: ''
			},
			tabshow:{
				type: Boolean,
				default: false
			},
			part: {
				type: Number,
				default: 1
			},
			/**
			 * 当前组件的配置对象
			 * pages: 运营类目item
			 * color......
			 */
			config: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
			}
		},
		computed: {
			pageConfig() {
				// console.log("pageConfig", this.$store.getters['gw/getRealComponentsList'][1]);
				return this.$store.getters['gw/getRealComponentsList'][1];
			},
			componentConfig() {
				return this.config.config || {};
			},
			//导航背景颜色
			tabbgcolor() {
				console.log("this.componentConfig", this.componentConfig)
				console.log("tabbgcolor", this.componentConfig.tabbgcolor, TabHeaderColor.tabbgcolor)
				return this.componentConfig.tabbgcolor || TabHeaderColor.tabbgcolor
			},
			styleConfig() {
				return {
					tabtextcolor: this.componentConfig.tabtextcolor || TabHeaderColor.tabtextcolor,//导航文字颜色
					clicktabtextcolor: this.componentConfig.clicktabtextcolor || TabHeaderColor.clicktabtextcolor,//选中TAB文字颜色
					clicktabbgcolor: this.componentConfig.clicktabbgcolor || TabHeaderColor.clicktabbgcolor,//选中的导航item的背景色
				};
			}
		},
		methods: {
			tabOnChange(index, item) {
				this.$emit('tabOnChange', index, item)
			},
			getStyleConfig() {
			}
		},
		components: {
			TabHead
		},
		watch: {
		},
		mounted() {
			PSEvent.listen("TabStyleUpdate", () => {
				this.getStyleConfig()
			});
			console.log("config", this.config);
		},
		beforeDestroy() {
			PSEvent.remove("TabStyleUpdate");
		}
		
	}
</script>

<style scoped>
	.tabzindex1{
		width: 100%;
	}
	.tabshow {
		position: absolute;
		z-index: -3;
	}
	.cjy-test-header {
		line-height: 1rem;
		height: 100%;
	}
	
	.cjy-slider {
		height: 2.15rem;
	}
	
	.cjy-text-inner {
		padding: 0.2rem 0.4rem;
		border-radius: 0.8rem;
		overflow: hidden;
		white-space: nowrap;
		word-break: break-all;
		text-overflow: clip;
	}
</style>